import React from 'react'
import './TodoList.css'
export default function TodoList() {
const [list,setList]=React.useState([{task:'学习js',status:"done",id:0},
{task:'学习vue',status:"done",id:1},
{task:'学习react',status:"notdo",id:2},
{task:'学习vue3',status:"notdo",id:3}])
const [curBtn, setCurBtn] = React.useState('all')
//添加任务
const inputref=React.useRef()
function addTask(){
    console.log(inputref)
    const t=inputref.current.value
    console.log('t',t)
    const m= {task:t,status:"notdo",id:list.length}
    list.unshift(m)
    inputref.current.value=''
    setList([...list])

}
//改变状态
function changeStatus(id){
        for (const item of list) {
            if(item.id===id){
                item.status=item.status==="done"?"notdo":"done"
            }
        }
    setList([...list])
}
function btnchick(e){
    console.log(e.target)
    let sta=e.target.getAttribute('btn')
    console.log(sta)
   setCurBtn(sta)
  

}
const showlist= React.useMemo(()=>{
    switch (curBtn) {
        case 'notdo':
          return  list.filter(m=>m.status==='notdo')
           case 'done':
            return list.filter(m=>m.status==='done')
    
        default:
            return  list
    }
            
},[list,curBtn])
  return (
    <div>
              <div><input type="text" placeholder='请输入任务' ref={inputref}/>
                    <button onClick={addTask}>添加任务</button>
            
            </div>  
            <ul>
                    {showlist.map((item)=>{
                    
                        return <li key={item.id} className={item.status} onClick={()=>changeStatus(item.id)}>{item.task}</li>

                    })}
                    
                    
                    </ul>
          <div onClick={btnchick}>
             <button className={curBtn === "all" ? 'active' : ""} btn='all' >全部</button>
            <button  btn='done' className={curBtn === "done" ? 'active' : ""}>已完成</button>
            <button  btn='notdo' className={curBtn === "notdo" ? 'active' : ""}>未完成</button>   

          </div>

    </div>
  )
}
